<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="form.factory_name" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable :disabled="user.source_from == 'gc'">
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.processing_code" placeholder="加工单号" @keyup.enter.native="searchBtn" size="small"
                              style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.sku_code" placeholder="SKU" @keyup.enter.native="searchBtn" size="small"
                              style="width: 120px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.m_status" size="small" placeholder="确认状态" style="width: 100px" clearable>
                        <el-option :value=0 label="未确认"></el-option>
                        <el-option :value=1 label="已确认"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small"
                               :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="成品加工单号" align="center" prop="processing_code" width="120"></el-table-column>
                <el-table-column label="状态" align="center" prop="m_status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.m_status == 0" size="mini" type="info">未确认</el-tag>
                        <el-tag v-else type="success" size="mini">已确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="工厂" align="center" prop="factory_name" width="130" show-overflow-tooltip></el-table-column>
                <el-table-column label="SKU" align="center" prop="sku_code" width="130">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="linkTo(row.sku_code, 'produce_lining_manage')">{{ row.sku_code }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="版面" align="center" prop="ban" width="60"></el-table-column>
                <el-table-column label="面料" align="center" prop="fabric">
                    <template slot-scope="{ row }">
                        <el-popover placement="right-start" width="300" trigger="hover">
                            <el-row>
                                <div v-for="(value,index) in fabrics" v-if="row[value]" :key="index">
                                    <el-tag  size="mini" style="margin: 0 4px 4px 0;">
                                        {{row[value]}}
                                    </el-tag>
                                </div>
                            </el-row>
                            <div slot="reference" class="ellipsis">
                                <el-tag v-for="(value,index) in fabrics" v-if="row[value]" :key="index" size="mini" style="margin: 0 4px 4px 0;">
                                    {{row[value]}}
                                </el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="款名" align="center" prop="type_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="理单员" align="center" prop="order_processor" width="80"></el-table-column>
                <el-table-column label="数量" align="center" prop="num" width="80"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="small" class="el-icon-check" v-if="row.m_status == 0" @click="checkBtn(row.n_id, 1)"
                            :disabled="!(row.m_status==0&&nodeActions.includes('edit'))">
                            确认
                        </el-button>
                        <span v-else>
                            <el-button type="text" size="small" class="el-icon-view" style="color: #67c23a" @click="viewBtn(row)">
                                预览
                            </el-button>
                            <el-button type="text" size="small" class="el-icon-close" :style="{color: nodeActions.includes('edit')?'red':''}" @click="checkBtn(row.n_id, 0)"
                                :disabled="!(nodeActions.includes('edit'))">
                                取消
                            </el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;">
                <el-button size="mini" type="primary" :disabled="!(selectedData.length>0&&nodeActions.includes('edit'))" @click="checkBatchBtn(1)">批量确认</el-button>
                <el-button size="mini" type="danger" :disabled="!(selectedData.length>0&&nodeActions.includes('edit'))" @click="checkBatchBtn(0)">批量取消</el-button>
                <Page style="float: right;" :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--水洗唛预览-->
        <el-dialog  title="水洗唛预览" :visible.sync="viewVisible" width="300px" :close-on-click-modal="false">
            <div class="tag-box">
                <div style="margin-top: 65px; text-align: center;">
                    <img :src="logossy2" alt="" style="width: 10mm; height: 10mm" />
                </div>
                <div style="font-size: 2.3mm;margin-top: 2mm;zoom: .73;">SKU：{{ viewForm.type_no }}</div>
                <div style="font-size: 2.3mm;margin-top: 2mm;zoom: .73;height: 40mm;zoom: .7;font-size: 2mm;margin-top: 2mm;white-space: pre-line;">
                    <span style="white-space: pre-wrap" v-html="viewForm.html"></span>
                </div>
                <div style="margin-bottom:3px;font-size: 2.3mm;zoom: 0.73;">洗涤说明:</div>
                <div style="display: flex; justify-content: space-between">
                    <img v-for="item in viewForm.ximaiimg" :key="item" :src="item" style="width: 20px; height: 20px"/>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <vue-qr class="qr-code" :text="viewForm.number" :size="110" />
                    <div style="text-align: center;width: 90px;font-size: 2.3mm;margin-top: -10px;">
                        {{ viewForm.number }}
                    </div>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {liningCheckList, liningPrintInfo, liningStatus} from "@/api/produce/lining";
import {factoryList} from "@/api/produce/factory";
import logossy2 from "@/assets/images/logossy2.png";
import vueQr from "vue-qr";

export default {
    name: "produce_lining_check",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {processing_code: "",  sku_code: "", m_status: "", factory_name: ""},
            fabrics: ['lining_one', 'lining_two', 'lining_three', 'lining_four', 'lining_five'],
            selectedData: [],
            viewForm: {},
            viewVisible: false,
            logossy2,

            factoryList: [],
            searchLoading: false,
        }
    },
    components:{
        vueQr,
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        if(this.user.source_from == 'gc'){//用户来源：工厂
            this.form.factory_name = this.user.factory_name;
        }
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.sku_code': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.sku_code){
                    this.$set(this.form, 'sku_code', val);
                    this.searchBtn();
                }
            }
        },
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, factory_name: name, tab: "1,2", status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //跳转
        linkTo(val, page){
            this.$router.push({name: page, params: {sku_code: val}});
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                factory_name: this.form.factory_name,
                sku_code: this.form.sku_code,
                m_status: this.form.m_status,
                processing_code: this.form.processing_code
            };
            this.loading = true;
            liningCheckList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        viewBtn(row){
            this.loading = true;
            liningPrintInfo({type_no: row.type_no}).then((res) =>{
                this.loading = false;
                this.viewForm = res.data;
                let reg = new RegExp("\r\n", "g");
                let regs = new RegExp("\\\\r\\\\n", "g");
                this.viewForm.html = this.viewForm.fabric.replaceAll(reg, "<br>").replaceAll(regs, "<br>");
                this.viewVisible = true;
            }).catch(()=>{
                this.loading = false;
            })
        },
        selectChange(list){
            this.selectedData = list;
        },
        //确认
        checkBtn(n_id, status){
            let msg = status ? "确认" : "取消确认";
            this.$confirm(`是否${msg}, 加工单面料?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                liningStatus({ids: JSON.stringify([n_id]), status: status}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("操作成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                });
            }).catch(() => {});
        },
        checkBatchBtn(status){
            let msg = status == 1 ? "确认加工单面料?" : "取消加工单面料?";
            this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let ids = [];
                this.selectedData.forEach(item =>{
                    ids.push(item.n_id);
                });
                this.loading = true;
                liningStatus({ids: JSON.stringify(ids), status: status}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("操作成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                });
            }).catch(() => {});
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.tag-box{
    margin-left: 43px;
    background: #fff;
    width: 45mm;
    height: 110mm;
    border: 1px solid rgb(45 140 240 / 18%);
    color: #000;
    padding: 0 3mm;
    box-sizing: border-box;
}
</style>
